<template>
<div>
    <aa></aa>
    <main>
        <div class="login">
            <div class="left">
                <h1>欢迎注册</h1>
                  <div><input @keyup="ccx" autocomplete="off" type="text" placeholder="手机号码" v-model="phone" ></div>
                  <h5 style="font-weight: 400;
    font-size: 14px;
    padding-top: 5px;color:#ee3843">{{phone1}}</h5>
                   <div class="yz"><input  autocomplete="off" type="password" placeholder="请输入密码" v-model="pwd"></div>
                   <h5 style="font-weight: 400;
    font-size: 14px;
    padding-top: 5px;color:#ee3843">{{pwd1}}</h5>
                    <div class="yz"><input autocomplete="off" v-model="yzm" type="text" :placeholder="choose?'验证码':'请输入密码'"><span v-show="choose" @click="yanzheng">获取验证码</span></div>
                    <h5 style="font-weight: 400;
    font-size: 14px;
    padding-top: 5px;color:#ee3843">{{yzm1}}</h5>
                    <p><input type="checkbox" v-model="chos" ><span style="display: inline-block;text-indent: 20px;">我已阅读并同意</span><span style="color:#ee3843">《使用条款及隐私说明》</span></p>
                    <h5 style="font-weight: 400;
    font-size: 14px;
    padding-top: 5px;color:#ee3843;width:280px;text-align:center;">{{read}}</h5>
                   <div class="login-l"><a href="javascript:;" @click="login2">注册</a> <span v-show="!choose">忘记密码?</span> </div>
            </div>
            <div class="right">
               <p>已注册账号:</p>
               <router-link :to="{name:'login',query:{history:0}}">立即登录</router-link><img src="/img/jiantou.png" alt="">
            </div>
        </div>
    </main>
    <my-footer></my-footer>
    </div>
</template>
<script>
import aa from '../components/OtherHeader.vue'
import MyFooter from '../components/MyFooter.vue'
export default {
    components:{aa,MyFooter},
    data(){
        return{
           choose:true,
           phone:'',
           pwd:'',
           yzm:'',
           phone1:'',
           pwd1:'',
           yzm1:'',
            read:'',
           chos:false,
        }
    },
    methods:{
        login(){
            this.choose=true;
        },
        yanzheng(){
            
        },
        ccx(){
            if(this.phone1=='该手机号已注册'){
                this.pwd='';
                this.yzm='';
                this.phone1=''
            }
        },
        login2(){
           if( !this.phone ||!this.pwd ||!this.yzm || this.chos==false ){
                this.phone1='';
                this.pwd1='';
                this.yzm1='';
                this.read='';
                !this.phone?this.phone1='手机号不能为空':!this.pwd?this.pwd1='密码不能为空':!this.yzm?this.yzm1='验证码不能为空':this.read='请阅读并选中服务条款!!!';
              return
           }else{
                this.phone1='';
                this.pwd1='';
                this.yzm1='';
                this.read='';
                if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.phone)){
                   this.phone1='请输入正确的手机号';
                   return;
               }
              if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(this.pwd)){
                  this.pwd1='密码不符合规则，请填写8到16位数字加字母';
                  return;
              } 
           }
            this.axios.post('/v1/user/register',`mobile=${this.phone}&pwd=${this.pwd}`).then(res=>{
               if(res.data.msg){
                  this.$router.push('/login')
               }else{
                   this.phone1='该手机号已注册'
               }
           })
           
        }
    },
    mounted(){
        
    },
    watch:{
    }
}
</script>
<style scoped>
main{
    position: relative;
    margin: 0 auto;
    background-image: url('/img/login_banner2.jpg');
    height:600px;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
main>.login::after{
    content: '';
    display: block;
    clear: both;
}
main>.login{
    position: absolute;
    width: 540px;

    padding: 50px 80px;
    top: calc(50% - 240px);
    left: calc(50% - 350px);
    background-color: white;
}
.login .left{
    width: 380px;
    height: 100%;
    border-right: 1px solid #eeeeee;
}
.left>p{
    padding-top: 20px;
    font-size: 14px;
    position: relative;
    text-indent: 20px;
}
.login .right{
    position: relative;
    width: 159px;
    right: -26px;
    height: 100%;
    text-align: center;
    padding-top: 164px;
}
.login .right p{
    font-size: 14px;
    text-indent:20px;
}
.login .right a{
    color:#ee3843;
    font-size: 14px;
    text-decoration: none;
}
.login .right img{
   position: absolute;
    right: 30px;
    top: 189px;
    
}
.login>div{
    float: left;
}
.left>p>input{
    position: absolute;
    top:23px
}
.left .choose {
    background-image: url('/img/login_bottom.png');
    background-repeat: no-repeat;
    background-position: bottom;
    color:#ee3843;
}
.left>div{
    border-bottom: 1px solid #eeeeee;
    width: 280px;
    height: 70px;
}
.left h1{
    font-weight: 500;
    font-size: 26px;
    text-align: center;
    width: 280px;
}
.left>div>input{
    width: 280px;
    border: 0;
    outline: none;
    height: 70px;
}
.left .yz{
    position: relative;
}
.left .yz span{
    width: 80px;
    position: absolute;
    top: calc(50% - 16px);
    right: 0;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ee3843;
    text-align: center;
    color:#ee3843;
    border-radius: 5px;
}
.left .login-l{
    background-color: #ee3843;
    height: 45px;
    border-radius: 5px;
    margin-top: 10px;
    position: relative;
}
.left .login-l span{
    position: absolute;
    top:-35px;
    right: 0;
    font-size: 14px;
    color:#ee3843
}
.left .login-l a{
    display: inline-block;
    color:white;
    width: 100%;
    height: 45px;
    text-align: center;
    line-height: 45px;
    font-size: 15px;
    text-decoration: none;
}
.left .login-l a:hover{
    background-color: #d62c37;
}
</style>
